<!--
	地震烈度图
	Created by Penglei on 2023/08/08
-->
<template>
    <div class="typical-damage">
        <div class="btn—group"><img src="@/assets/images/anbao/up_arrow.png" alt="" @click="onPrev()"></div>
        <el-carousel ref="carouselRef" direction="vertical" indicator-position="none" arrow="always" :autoplay="true"
            :interval="5000" height="330px">
            <el-carousel-item v-for="item in 1" :key="item" v-if="imgSixList.length>0">
                <img v-for="(v,i) in imgSixList" :key="i" class="banner-img" :src="v.url" :alt="item">
            </el-carousel-item>
            <el-carousel-item v-for="item in 1" :key="item" v-if="imgSevenList.length>0">
                <img v-for="(v,i) in imgSevenList" :key="i" class="banner-img" :src="v.url" :alt="item">
            </el-carousel-item>
            <el-carousel-item v-for="item in 1" :key="item" v-if="imgEightList.length>0">
                <img v-for="(v,i) in imgEightList" :key="i" class="banner-img" :src="v.url" :alt="item">
            </el-carousel-item>
            <el-carousel-item v-for="item in 1" :key="item" v-if="imgNineList.length>0">
                <img v-for="(v,i) in imgNineList" :key="i" class="banner-img" :src="v.url" :alt="item">
            </el-carousel-item>
            <el-carousel-item  v-if="imgTenList.length>0" v-for="item in 1" :key="item" >
                <img v-for="(v,i) in imgTenList" :key="i" class="banner-img" :src="v.url" :alt="item">
            </el-carousel-item>
        </el-carousel>
        <div class="btn—group"><img src="@/assets/images/anbao/down_arrow.png" alt="" @click="onNext()"></div>
    </div>
</template>

<script setup name="TypicalDamagePhotos">
import { onMounted, watch } from "vue";

const props = defineProps({
imgSixList: {
    required: true,
    type: Array,
    default: [],
  },
  imgSevenList: {
    required: true,
    type: Array,
    default: [],
  },
  imgEightList: {
    required: true,
    type: Array,
    default: [],
  },
  imgNineList: {
    required: true,
    type: Array,
    default: [],
  },
  imgTenList: {
    required: true,
    type: Array,
    default: [],
  },
});

const isTenShow=ref(false)
// 轮播图对象
const carouselRef = ref();
// 上一张
const onPrev = () => {
    carouselRef.value.prev();
}
// 下一张
const onNext = () => {
    carouselRef.value.next();
}


// 初始化加载
const init = () => {}

</script>

<style lang="scss" scoped>
.typical-damage {
    padding: 20px 0;
}
.btn—group {
    text-align: center;

    img {
        width: 30px;
        cursor: pointer;
    }
}

.el-carousel {
    margin-top: 10px;

    :deep(.el-carousel__item) {
        display: flex;
        justify-content: space-around;
        flex-wrap: wrap;

        .banner-img {
            height: 150px;
            width: 210px;
        }
    }
}
</style>